import React from 'react';
import { Breadcrumb } from 'antd';
import { useLocation, Link } from 'react-router-dom';

const DynamicBreadcrumb = () => {
  const location = useLocation();
  // 解析当前路由并返回面包屑项
  const getBreadcrumbItems = () => {
    const pathSnippets = location.pathname.split('/').filter((i) => i);
    return pathSnippets.map((_, index) => {
      const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
      return (
        <Breadcrumb.Item key={url}>
          <Link to={url}>{getBreadcrumbTitle(url)}</Link>
        </Breadcrumb.Item>
      );
    });
  };

  // 根据路由获取面包屑标题
  const getBreadcrumbTitle = (path: any) => {
    // 这里应该根据实际的路由配置来获取标题
    // 例如，你可以有一个路由配置对象，然后通过 path 来查找对应的标题
    // 这里只是一个示例，返回路径本身
    return path.split('/').pop();
  };

  return (
    <Breadcrumb style={{ margin: '16px 0' }}>{getBreadcrumbItems()}</Breadcrumb>
  );
};

export default DynamicBreadcrumb;
